.following-manage__header {
	max-width: 720px;
	margin: auto;
}

.following-manage .search {
	margin: 0;
}

.following-manage .following-manage__input-card {
	padding: 0;
}

.following-manage__input-card.card.is-compact {
	box-shadow: 0 0 0 2px var( --color-neutral-10 ), 0 1px 2px var( --color-neutral-10 );
}

.following-manage__subscriptions {
	margin-top: 20px;
	padding-top: 10px;
}

// Load more results
.following-manage__show-more {
	border-top: 1px solid var( --color-neutral-10 );
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.following-manage__show-more-button.button {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	color: var( --color-text-subtle );
	font-size: $font-body-extra-small;
	padding: 2px 9px 6px 11px;
	position: relative;
	top: -1px;

	.gridicon.gridicons-chevron-down {
		height: 14px;
		left: -4px;
		top: 3px;
		width: 14px;
	}

	&:hover {
		color: var( --color-neutral-40 );
		cursor: pointer;
	}
}

// Subscription controls
.following-manage__subscriptions-controls {
	display: flex;

	@include breakpoint-deprecated( '<960px' ) {
		flex-wrap: wrap;
	}

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 15px;
	}

	> :not( :first-child ) {
		margin-right: 10px;
	}

	.following-manage__subscriptions-header {
		flex: 1;
		font-weight: 600;
		padding: 4px 0 15px;

		@include breakpoint-deprecated( '<960px' ) {
			flex: 0 0 auto;
			width: 100%;
		}
	}

	.following-manage__subscriptions-sort {
		position: relative;

		&::before {
			@include breakpoint-deprecated( '<960px' ) {
				@include long-content-fade( $size: 20% );
				height: 30px;
				right: 30px;
				top: 1px;
			}
		}
	}

	.following-manage__subscriptions-sort,
	.following-manage__subscriptions-search {
		@include breakpoint-deprecated( '<960px' ) {
			flex: 1;
		}
	}

	.following-manage__subscriptions-sort .following-manage__sort-controls {
		color: var( --color-text-subtle );
		font-size: $font-body-extra-small;
		font-weight: normal;
		padding-top: 8px;
		width: 100%;

		@include breakpoint-deprecated( '>960px' ) {
			min-width: 200px;
		}
	}

	.following-manage__subscriptions-search {
		margin-top: 1px;

		@include breakpoint-deprecated( '<660px' ) {
			margin-right: 0;
		}
	}

	.following-manage__subscriptions-search .search-card {
		box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.3 );

		.following-manage__search-followed-input.is-compact {
			height: 32px;

			@include breakpoint-deprecated( '<660px' ) {
				min-width: 0;
			}
		}

		.search__input {
			background: transparent;
			padding-bottom: 5px;
		}
	}

	.following-manage__subscriptions-import-export {
		margin-right: 0;

		@include breakpoint-deprecated( '<660px' ) {
			display: none;
		}

		.gridicon.gridicons-ellipsis {
			fill: var( --color-neutral-20 );
			top: 0;
		}
	}
}

.following-manage__subscriptions-import-export-menu-item {
	.reader-import-button__icon,
	.reader-export-button__icon {
		vertical-align: middle;
	}

	&:hover,
	&:focus {
		.reader-import-button__icon,
		.reader-export-button__icon {
			fill: var( --color-text-inverted );
		}

		.reader-import-button__label,
		.reader-export-button__label {
			color: var( --color-text-inverted );
		}
	}
}

.following-manage .reader-recommended-sites {
	border-bottom: 1px solid var( --color-neutral-10 );
}

.following-manage__search-followed {
	margin-left: 0;
}

.following-manage__search-followed-input {
	@include breakpoint-deprecated( '>960px' ) {
		min-width: 200px;
	}
}

.following-manage__search-results > div {
	border-bottom: 1px solid var( --color-neutral-0 );

	&:nth-last-child( 2 ),
	&:last-child {
		border-bottom: 0;
	}
}

.following-manage__search-results.is-empty,
.following-manage__subscriptions-list.is-empty {
	color: var( --color-neutral-40 );
}

.following-manage__search-results .reader-subscription-list-item__options {
	display: flex;
	flex-direction: column;
	min-width: 24px;

	@include breakpoint-deprecated( '>660px' ) {
		min-width: 90px;
	}

	.button.follow-button {
		@include breakpoint-deprecated( '>660px' ) {
			display: flex;
		}
	}
}

.following-manage__search-results.is-empty {
	margin-top: 10px;
	word-wrap: break-word;
}

.following-manage__subscriptions-list.is-empty {
	margin-top: 30px;
	text-align: center;
}

.following-manage__sites-window-scroller-row-wrapper {
	border-bottom: 1px solid var( --color-neutral-0 );

	&:last-child {
		border: 0;
	}
}

.following-manage__url-follow-no-search-results-message {
	margin-top: -5px;
	padding-bottom: 15px;
	color: var( --color-neutral-40 );
}

.following-manage__url-follow {
	border-bottom: 1px solid var( --color-neutral-0 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 13px 0 10px;
	position: relative;
	z-index: z-index( 'root', '.following-manage__url-follow' );

	.follow-button {
		.gridicon {
			fill: var( --color-primary );
		}

		.follow-button__label {
			color: var( --color-primary );

			@include breakpoint-deprecated( '<660px' ) {
				display: inline;
			}
		}

		&.is-following {
			.gridicon {
				fill: var( --color-success );
			}

			.follow-button__label {
				color: var( --color-success );
			}
		}
	}
}
